<template>
  <div>
    <div class="message">
      {{ message }}
    </div>
    Enter your username: <input v-model="username" />
    <div v-if="error" class="error">
      Please enter a username with at least seven letters.
    </div>
    <button @click="add">123{{ count }}</button>
    <child @print="print"></child>
  </div>
</template>

<script>
import child from "./child.vue";
export default {
  name: "HelloWorld",
  components: {
    child,
  },
  data() {
    return {
      message: "Welcome to the Vue.js cookbook",
      username: "",
      count: 0,
      number: 0,
    };
  },

  computed: {
    error() {
      return this.username.trim().length < 7;
    },
  },
  methods: {
    add() {
      this.count = 1;
    },
    print(number) {
      console.log(number);
      this.number = number;
    },
  },
  mounted() {
    this.$emit("a", 123);
    this.$emit("b", 123);
  },
};
</script>
